<template>
  <div class="container">
    <div class="navigationBar" style="width: 98%;margin: 10px auto 0">
      <el-row :gutter="24">
        <el-col :span="3">
          <el-input v-model="listQuery.customer_id" placeholder="请输入活动名称" clearable @change="search"></el-input>
        </el-col>

        <el-col :span="2">
          <el-select v-model="listQuery.status" placeholder="订单状态">
            <el-option
              v-for="item in status_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col  :span="16">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="3" class="add">
          <el-button type="success" @click="handleAdd">增加订单</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="filter-container">
      <el-checkbox v-model="formThead.customer_id" label="所属用户">所属用户</el-checkbox>
      <el-checkbox v-model="formThead.customer_telephone" label="用户手机号">用户手机号</el-checkbox>
      <el-checkbox v-model="formThead.total" label="订单总价格">订单总价格</el-checkbox>
      <el-checkbox v-model="formThead.pay_status" label="支付状态">支付状态</el-checkbox>
      <el-checkbox v-model="formThead.refund_status" label="订单退款状态">订单退款状态</el-checkbox>
      <el-checkbox v-model="formThead.status" label="订单状态">订单状态</el-checkbox>
      <el-checkbox v-model="formThead.activity_title" label="订单所属活动">订单所属活动</el-checkbox>
      <el-checkbox v-model="formThead.discount_amount" label="订单减免金额">订单减免金额</el-checkbox>
      <el-checkbox v-model="formThead.actual_total" label="订单实际付款金额">订单实际付款金额</el-checkbox>
    </div>
    <div class="filter-container">
      <el-checkbox v-model="formThead.activity_coupon_amount" label="优惠券金额">优惠券金额</el-checkbox>
      <el-checkbox v-model="formThead.shopping_card_amount" label="购物卡金额">购物卡金额</el-checkbox>
      <el-checkbox v-model="formThead.date_added" label="生成日期">生成日期</el-checkbox>
      <el-checkbox v-model="formThead.cours" label="课程">课程</el-checkbox>
    </div>


    <el-table :data="orderList" class="table" border :key="orderList.length"
              v-loading="loading"
              element-loading-text="拼命加载中....">
      <el-table-column label="所属用户" align="center" v-if="formThead.customer_id">
        <template slot-scope="{row}">
          <!-- <span>{{row.customer_id}}</span> -->
          <span>{{getCustomerName(row.customer_id)}}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户手机号" align="center" v-if="formThead.customer_telephone">
        <template slot-scope="{row}">
          <span>{{row.customer_telephone}}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单总价格" align="center" v-if="formThead.total">
        <template slot-scope="{row}">
          <span>{{row.total}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="tag" label="支付状态" align="center" v-if="formThead.pay_status">
        <template slot-scope="{row}">
          <span v-if="row.pay_status == 0" style="color: #F56C6C">未支付</span>
          <span v-else-if="row.pay_status == 1" style="color: #67c23a">已支付</span>
        </template>
      </el-table-column>

      <el-table-column prop="tag" label="订单退款状态" align="center" v-if="formThead.refund_status">
        <template slot-scope="{row}">
          <span v-if="row.refund_status == 0" style="color: #67c23a">未退款</span>
          <span v-else-if="row.refund_status == 1" style="color: #F56C6C">已退款</span>
        </template>
      </el-table-column>


      <!--      失败，进行中，已完成-->
      <el-table-column label="订单状态" align="center" v-if="formThead.status">
        <template slot-scope="{row}">
          <span v-if="row.status == 0" style="color: #F56C6C">失败</span>
          <span v-else-if="row.status == 1" style="color: #409EFF">进行中</span>
          <span v-else-if="row.status == 2" style="color: #67C23A">已完成</span>
        </template>
      </el-table-column>

      <el-table-column label="订单所属活动" align="center" v-if="formThead.activity_title">
        <template slot-scope="{row}">
          <span v-if="row.order_activity.length > 0">{{row.order_activity[0].activity_title}}</span>
        </template>
      </el-table-column>


      <el-table-column label="订单减免金额" align="center" v-if="formThead.discount_amount">
        <template slot-scope="{row}">
          <span v-if="row.discount_amount===null || row.discount_amount === ''">0</span>
          <span v-else>{{row.discount_amount}}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单实际付款金额" align="center" v-if="formThead.actual_total">
        <template slot-scope="{row}">
          <span>{{row.actual_total}}</span>
        </template>
      </el-table-column>

      <el-table-column label="优惠券金额" align="center" v-if="formThead.activity_coupon_amount">
        <template slot-scope="{row}">
          <span v-if="row.activity_coupon_amount===null || row.activity_coupon_amount === ''">0</span>
          <span v-else>{{row.activity_coupon_amount}}</span>
        </template>
      </el-table-column>

      <el-table-column label="购物卡金额" align="center" v-if="formThead.shopping_card_amount">
        <template slot-scope="{row}">
          <span v-if="row.shopping_card_amount===null || row.shopping_card_amount === ''">0</span>
          <span v-else>{{row.dshopping_card_amount}}</span>
        </template>
      </el-table-column>

      <el-table-column label="课程" align="center" v-if="formThead.cours">
        <template slot-scope="{row}" v-if="row.cours.length > 0">
          <span>{{row.cours[0].name}}</span>
        </template>
      </el-table-column>

      <el-table-column label="生成日期" align="center" v-if="formThead.date_added">
        <template slot-scope="{row}">
          <span>{{row.date_added}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="{row}">
          <el-button size="mini" type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-button type="danger" @click="openDelete(row.order_id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination :current-page="listQuery.page" :page-sizes="[10,15,20,30,50]" :page-size="listQuery.limit" :total="total" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
    </div>

    <add-order ref="showAddDialog"/>
    <edit-order ref="showEditDialog"/>

  </div>
</template>

<script>
  import store from '@/store'
  import {list,del} from '@/api/thk/order'
  import {list as getCustomerList} from '@/api/thk/customer'
  import {list as getCouponList} from '@/api/thk/coupon'
  import {list as getStoreList} from '@/api/thk/store'

  import addOrder from './add'
  import editOrder from './edit'

  export default {
    name: 'order',
    components: {
      addOrder,
      editOrder
    },

    data() {
      return {
        /**
         order_id                       订单id
         customer_id                    用户id
         customer_telephone             用户手机号
         activity_coupon_id             优惠券所使用的id
         total                          订单总价格
         discount_amount                减免价格
         actual_total                   实际价格
         pay_status                     0未支付，1已支付，支付状态
         refund_status                  订单退款状态 0(未退款),1(已退款)
         status                          1有效，0无效；优惠活动默认有效，团购活动团购成功才有效。
         date_added                     生成日期
         activity_id                    活动id
         activity_title	            	  活动名称
         order_activity_id              活动订单id
         activity_coupon_amount:        优惠券金额
         shopping_card_amount:          购物卡金额

         order_activity: (...)          订单对应的活动
         cours: Array(1)                订单对应的课程

         */
        orderList: [],
        searchText: '',
        customerList: [],
        couponList: [],
        storeList: [],

        total: undefined,

        formThead: {
          customer_id: true,
          customer_telephone: true,
          total: true,
          pay_status: true,
          refund_status: true,
          status: true,
          activity_title: true,
          date_added: false,
          discount_amount: true,
          actual_total: true,
          activity_coupon_amount: false,
          shopping_card_amount: false,
          cours: false,
        },


        listQuery: {
          customer_id: undefined,
          pay_status:undefined,
          page: 1,
          pagesize: 10
        },

        status_options: [{
          value: '0',
          label: '无效'
        }, {
          value: '1',
          label: '有效'
        }, {
          value: '',
          label: '全部'
        }],

        loading: true,
      }
    },

    // created生命周期中调用查询question列表的方法
    created() {
      this.getOrderList()
      this.getCustomerList()
      this.getCouponList()
      this.getStoreList()
    },

    updated: function () {
      this.$nextTick(function () {
        this.loading = false
      })
    },

    methods: {
      // 查询question列表
      getOrderList(){
        list(store.getters.token, this.listQuery).then(res =>{

          this.total = res.data.list.total
          this.orderList = res.data.list.data
          console.log("订单列表")
          console.log(res)
        },error => {
          console.log(error)
        })
      },

      handleAdd(){
        this.$refs.showAddDialog.cancelSubmit(this.customerList, this.couponList, this.storeList)
      },




      handleEdit(row){
        this.$refs.showEditDialog.showEditDialog(row,this.customerList)
      },


      // 删除order
      handleDelete(order_id){
        del(store.getters.token, order_id).then(res => {
          this.getOrderList()
        }).catch(err => {
          console.log("删除customer失败")
        })
      },

      openDelete(order_id) {
        this.$confirm('此操作将会删除订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleDelete(order_id)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      // 获取用户列表
      getCustomerList(){
        getCustomerList(store.getters.token).then(res=>{
          this.customerList = res.data.list.data
        }).then(err => {
          console.log(err)
        })
      },

      // 根据用户id返回用户名,用于显示店铺所属用户
      getCustomerName(customer_id){
        console.log(this.customerList,"4545845484")
        let customers = this.customerList.filter(customer => {
          return customer.customer_id == customer_id
        })

        if(customers[0]){
          return customers[0].nickname
        }

        return ''
      },

      getCouponList(){
        getCouponList(store.getters.token).then(res =>{


          this.couponList = res.data.list.data

          console.log('>>>>>>>')
          console.log(this.couponList)

        },error => {
          console.log(error)
        })
      },

      // 获取店铺列表
      getStoreList(){
        getStoreList(store.getters.token).then(res =>{
          this.storeList = res.data.list.data
        },error => {
          console.log(error)
        })
      },

      // 搜索功能
      search(){
        this.getOrderList()
        console.log('搜索成功')
      },

      handleSizeChange(val) {
        this.listQuery.pagesize = val
        this.getOrderList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getOrderList()
      },

    }
  }

</script>

<style scoped>
  img{
    height: 50px;
    width: 50px;
    margin: 0;
    padding: 0;
  }
  .filter-container{
    margin: 10px 0 -9px 20px;
  }
  .table{
    width: 98%;
    margin: 10px auto 0;
  }
  .add{
    position: relative;
    top: 35px;
    left: 32px;
  }

</style>
